<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	p{
		border:1px red solid;
	}
</style>
</head>
<body>
<h1>设置图片与文字的对齐方式</h1>
<p>竖直对齐：<img src="red.jpg" style="vertical-align: baseline;"/> 方式：<img src="blue.jpg" style="vertical-align: baseline;"/>baseline</p>
<p>竖直对齐：<img src="red.jpg" style="vertical-align: top;"/> 方式：<img src="blue.jpg" style="vertical-align: top;"/>top</p>
<p>竖直对齐：<img src="red.jpg" style="vertical-align: middle;"/> 方式：<img src="blue.jpg" style="vertical-align: middle;"/>middle</p>
<p>竖直对齐：<img src="red.jpg" style="vertical-align: bottom;"/> 方式：<img src="blue.jpg" style="vertical-align: bottom;"/>bottom</p>
<p>竖直对齐：<img src="red.jpg" style="vertical-align: text-bottom;"/> 方式：<img src="blue.jpg" style="vertical-align: text-bottom;"/>text-bottom</p>
<p>竖直对齐：<img src="red.jpg" style="vertical-align: text-top;"/> 方式：<img src="blue.jpg" style="vertical-align: text-top;"/>text-top</p>
<p>竖直对齐：<img src="red.jpg" style="vertical-align: sub;"/> 方式：<img src="blue.jpg" style="vertical-align: sub;"/>sub</p>
<p>竖直对齐：<img src="red.jpg" style="vertical-align: super;"/> 方式：<img src="blue.jpg" style="vertical-align: super;"/>super</p>
<p>竖直对齐：<img src="red.jpg" style="vertical-align: 20px;"/> 方式：<img src="blue.jpg" style="vertical-align: 20px;"/>20px;</p>
<p>竖直对齐：<img src="red.jpg" style="vertical-align: -20px;"/> 方式：<img src="blue.jpg" style="vertical-align: -20px;"/>-20px;</p>
</body>
</html>